<!DOCTYPE html>
<html>
<head>
    <title>Gravitational Wave Detector Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // --- Style and Font ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    ctx.font = "24px KaiTi";

    // --- Helper function to draw fixed support ---
    function drawFixedSupport(x, y, orientation, length) {
        ctx.beginPath();
        if (orientation === 'vertical') {
            const y_start = y - length / 2;
            const y_end = y + length / 2;
            ctx.moveTo(x, y_start);
            ctx.lineTo(x, y_end);
            for (let i = 0; i <= 4; i++) {
                const hatch_y = y_start + i * (length / 4);
                ctx.moveTo(x, hatch_y);
                ctx.lineTo(x - 10, hatch_y + 10);
            }
        } else { // horizontal
            const x_start = x - length / 2;
            const x_end = x + length / 2;
            ctx.moveTo(x_start, y);
            ctx.lineTo(x_end, y);
            for (let i = 0; i <= 4; i++) {
                const hatch_x = x_start + i * (length / 4);
                ctx.moveTo(hatch_x, y);
                ctx.lineTo(hatch_x - 10, y + 10);
            }
        }
        ctx.stroke();
    }

    // --- Main drawing coordinates ---
    const cx = 250;
    const cy = 220;
    const bs2_x = 400;

    // --- Draw light paths ---
    ctx.beginPath();
    // Horizontal path
    ctx.moveTo(80, cy);
    ctx.lineTo(550, cy);
    // Vertical path 1 (to rod)
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx, 450);
    // Vertical path 2 (to detector)
    ctx.moveTo(bs2_x, cy);
    ctx.lineTo(bs2_x, 320);
    ctx.stroke();


    // --- Draw Components ---

    // Laser
    ctx.strokeRect(450, cy - 15, 100, 30);
    ctx.textAlign = "center";
    ctx.fillText("激光器", 500, cy - 25);

    // Phototube
    ctx.strokeRect(bs2_x - 15, 320, 30, 60);
    ctx.textAlign = "left";
    ctx.fillText("光电管", bs2_x + 25, 355);

    // Horizontal Rod
    ctx.strokeRect(80, cy - 15, 150, 30);
    ctx.textAlign = "center";
    ctx.fillText("棒", 155, cy - 25);
    drawFixedSupport(80, cy, 'vertical', 50);

    // Vertical Rod
    ctx.strokeRect(cx - 15, 250, 30, 200);
    ctx.textAlign = "right";
    ctx.fillText("棒", cx - 25, 350);
    drawFixedSupport(cx, 450, 'horizontal', 50);

    // --- Draw Beamsplitters ---
    // Left beamsplitter
    ctx.beginPath();
    ctx.moveTo(cx - 15, cy - 15);
    ctx.lineTo(cx + 15, cy + 15);
    ctx.stroke();

    // Right beamsplitter
    ctx.beginPath();
    ctx.moveTo(bs2_x - 15, cy - 15);
    ctx.lineTo(bs2_x + 15, cy + 15);
    ctx.stroke();

    // --- Draw Labels and Arrows ---
    // "半透镜" (Beamsplitter) label
    ctx.textAlign = "center";
    ctx.fillText("半透镜", 325, 160);

    // Arrow pointing to the left beamsplitter
    ctx.beginPath();
    ctx.moveTo(300, 165);
    ctx.quadraticCurveTo(280, 185, 260, 200);
    ctx.stroke();
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(260, 200);
    ctx.lineTo(268, 195);
    ctx.moveTo(260, 200);
    ctx.lineTo(255, 192);
    ctx.stroke();


    // Arrow pointing to the right beamsplitter
    ctx.beginPath();
    ctx.moveTo(350, 165);
    ctx.quadraticCurveTo(370, 185, 390, 200);
    ctx.stroke();
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(390, 200);
    ctx.lineTo(398, 195);
    ctx.moveTo(390, 200);
    ctx.lineTo(385, 192);
    ctx.stroke();

</script>
</body>
</html>